<!DOCTYPE html>

		<html>
		<head>
			<meta charset="utf-8" />
			<meta name="viewport" content="width=device-width, initial-scale=1.0" />

			<!--360浏览器优先以webkit内核解析-->

			<title>添加商品</title>

			<link rel="shortcut icon" href="favicon.ico" />
			<link href="static/css/bootstrap.min.css?v=3.3.7" rel="stylesheet" />
			<link href="static/css/font-awesome.css?v=4.4.0" rel="stylesheet" />
			<link rel="stylesheet" href="static/js/plugins/layui/css/layui.css">
			<link href="static/css/animate.css" rel="stylesheet" />
			<link href="static/css/style.css?v=4.1.0" rel="stylesheet" />
		</head>
		<style>
			.m_right {
				margin-right: 30px;
			}
			.m_top{
				margin-top: 20px;
			}
			.lab{
				width: 100px;
			}
			.selt{
				margin: 0 0 15px 12px;
			}
			/* .tu{
				width: 100px;
				height: 200px;
			} */
			#demo1{
				width: 100px;
				height: 100px;
			}
		</style>

		<body class="gray-bg">
			<form action="" method="get">
				<div class="layui-form layuimini-form m_right">
					<div class="layui-form-item">
						<label class="layui-form-label required lab">商品名称</label>
						<div class="layui-input-block">
							<input type="text" name="shopname" lay-verify="required" lay-reqtext="商品名称不能为空" placeholder="请输入商品名称"
								value="" class="layui-input" id="shopname">
							<!-- <tip>填写自己管理账号的名称。</tip> -->
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label lab">商品类型</label>
						<div class="layui-input-inline selt">
							<select name="shoptype" lay-verify="required" lay-search="" id="shoptype">
								<option value="0">请选择权限</option>
								<option value="1">管理员</option>
								<option value="2">普通用户</option>
							</select><span id="add_hint3"></span>
			
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label required lab">商品价格</label>
						<div class="layui-input-block">
							<input type="text" name="shopprice" lay-verify="required" lay-reqtext="商品价格不能为空" placeholder="请输入商品价格"
								value="" class="layui-input" <br>
						</div>
					</div>
			
					<div class="layui-form-item layui-form-text">
						<label class="layui-form-label required lab">商品价格</label>
						<div class="layui-input-block">
							<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
						</div>
					</div>
			
					<div class="layui-form-item">
						<label class="layui-form-label required lab">商品库存</label>
						<div class="layui-input-block">
							<input type="text" name="shoprepertory" lay-verify="required" lay-reqtext="商品库存不能为空"
								placeholder="请输入商品库存" value="" class="layui-input" <br>
						</div>
					</div>
			
					<div class="layui-form-item">
						<label class="layui-form-label required lab">卖家账号</label>
						<div class="layui-input-block">
							<input type="text" name="username" lay-verify="required" lay-reqtext="卖家账号不能为空" placeholder="请输入卖家账号"
								value="" class="layui-input" <br>
						</div>
					</div>
			
					
					<div class="layui-form-item">
						<label class="layui-form-label required lab">商品图片</label>
						<div class="layui-input-block">
							<div>
								<div class="layui-upload">
									<button type="button" class="layui-btn" id="test1">上传图片</button>
									<div class="layui-upload-list" style="width: 95px;">
										<img class="layui-upload-img" id="demo1">
										<p id="demoText"></p>
									</div>
									<div style="width: 95px;">
										<div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
											<div class="layui-progress-bar" lay-percent=""></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="layui-form-item m_top">
						<div class="layui-input-block">
							<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
						</div>
					</div>
				</div>
			</form>
			<!-- 全局js -->
			<script src="static/js/jquery.min.js?v=2.1.4"></script>
			<script src="static/js/bootstrap.min.js?v=3.3.7"></script>
			<script src="static/js/plugins/layer/layer.min.js"></script>
			<script src="static/js/plugins/layui/layui.js"></script>

			<!-- 自定义js -->
			<script src="static/js/content.js"></script>

			<!-- 欢迎信息 -->
			<script src="static/js/welcome.js"></script>

			<script>
			layui.use(['upload', 'element','form'], function () {
				var form = layui.form,
					layer = layui.layer,
					upload = layui.upload,
					element = layui.element
					$ = layui.$;

				//监听提交
				form.on('submit(saveBtn)', function (data) {

					let ss = document.getElementById("modules");
					let index1 = ss.selectedIndex;
					let tint3 = $("#add_hint3");
					if (index1 == 0) {
						tint3.html("必须选择一项！！！");
					} else {
						var iframeIndex = parent.layer.getFrameIndex(window.name);
						parent.layer.close(iframeIndex);
					}
					//获取下拉列表的value值
					// let osel = document.getElementById("modules");
					// let opts = osel.getElementsByTagName("option");
					// for (let i = 0; i < opts.length; i++) {
					// 	if (opts[i].selected == true) {
					// 		alert(opts[i].value)
					// 	}

					// }

					return false;
				});

				//判断密码是否等于六位
				$("#password").blur(function () {
					let password = $("#password").val();
					let tint2 = $("#add_hint2");
					if (password.length != 6) {
						tint2.html("请重新输入！密码是六位")
					} else {
						tint2.html("")
					}
				})



				//上传图片
				var uploadInst = upload.render({
					elem: '#test1'
					,with:50
					,height:70
					, url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
					
					, before: function (obj) {
						//预读本地文件示例，不支持ie8
						obj.preview(function (index, file, result) {
							alert(file.name);
							$('#demo1').attr('src', result); //图片链接（base64）
							alert(result);
						});

						element.progress('demo', '0%'); //进度条复位
						layer.msg('上传中', { icon: 16, time: 0 });
					}
					, done: function (res) {
						//如果上传失败
						if (res.code > 0) {
							return layer.msg('上传失败');
						}
						//上传成功的一些操作
						//……
						$('#demoText').html(''); //置空上传失败的状态
					}
					, error: function () {
						//演示失败状态，并实现重传
						var demoText = $('#demoText');
						demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
						demoText.find('.demo-reload').on('click', function () {
							uploadInst.upload();
						});
					}
					//进度条
					, progress: function (n, elem, e) {
						element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
						if (n == 100) {
							layer.msg('上传完毕', { icon: 1 });
						}
					}
				});
			});
			</script>
		</body>

		</html>